<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>家乐氏</title>
     <script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script>
     <!--<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>-->
     <script src="js/pace.min.js"></script>
     <!--<script src = 'js/judge.js'></script>-->
    <script src='js/ep2.js'></script>
    <link rel="stylesheet" href="themes/blue/pace-theme-loading-bar.css">
    <style>
        .hide{
            width: 100%;
            height: 100%; 
            display: none;
        }
        .video{
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }
        html,body{
            width:100%;height:100%;overflow:hidden;
        }
        
        *{
            padding: 0;
            margin: 0;
        }
        .imgs{
            width: 100%;
            height: 100%;
            display: none;

        }
        img{
            position: fixed;
            top: 0;
            left: 0;
            z-index: 90;
        }
        #img10{
            transform-origin: bottom;
            transform: rotatex(-90deg);
            transition-duration: 1s;
        }
        #img11{
            transform-origin:left;
            transform:rotateY(90deg);
            transition-duration: 2s;
        }
       
        .opacity{
            opacity: 0.3;
        }

       .container1 {
            width: 100%;
            height: 100%;
            left: 0;
            background: #0b0b0c;
            z-index: 99;
            opacity: 0.6;
        }

        
        .container1 p,a,btn{
            position:absolute;
            color: #FFFFFF;
            width: 70%;
            font-size: 1em;
            z-index: 98;
        }
        
        .fxlink {
            text-align: center;
            width: 30%;
            background: #FFFFFF;
            display: block;
            margin-top: 0%;
            color: #080808;
            float: left;
            font-size: 1em;
            z-index: 98;
            text-decoration: none;
        }
        .fx{top:-20%;left: 20%;z-index:98;}
        .sc {top:140%;left: 55%;z-index: 98}
    /*隐藏所有小图片*/
        .minimg{display:none;}
    /*初始化p的位置准备动画片*/
        .p0{top:-20%;left:20%;width:90%}
        .p1{top:30%;left:-20%}
        .p2{top:35%;left:120%}
        .p3{top:120%;left:20%}
        .p4{top:45%;left:-40%}
    /*初始化红唇img的位置准备动画*/
        .hc{top:-30%;left: 130%}
    /*初始化薯片小img的位置*/
        .sp{top:40%;left: 30%}
        .sp1{top:39%;left: 50%}
        .sp2{top:38%;left: 70%}

        
    </style>


    <link rel="stylesheet" href="css/main.css">

</head>
<body>
    <!-- <button id = "start"  class = "hide bn">点击以开始游戏</button> -->
    <div class="container hide" id='start'>  
        <div class="dot">开始</div>  
        <div class="pulse"></div> 
        <div class="pulse1"></div>
    </div>   
    <div class="container1 hide" id='fenxiang'>  
        <p class="p0">还在那里犯花痴做<big>白日梦呢？</big></p>
        <p class="p1"><big>心动</big></p>
        <p class="p2">不如行动！</p>
        <p class="p3"><big>赶快来家乐氏商城</big></p> 
        <p class="p4"><big>henry</big>等着你呢</p>   
        <btn class="fxlink fx">分享</btn> 
        <a class="fxlink sc" href="#" >前往商城</a>  
    </div>
   
    
<!--     <img src="img/sp.jpg" class="imgs" id='sp' alt="">
    <img src="img/sp1.jpg" class="imgs" id='sp1' alt="">
    <img src="img/sp2.jpg" class="imgs" id='sp2' alt=""> -->
    <img src="img/9.jpg" class="hc minimg" id='img9' alt="">
     <img src="img/10.jpg" class="imgs" id='img10' alt="">
     <img src="img/11.png" class="imgs" id='img11' alt="">
     <video id='v3' preload class="video hide" webkit-playsinline='true' style="object-fit:fill"  playsinline='true' x5-video-player-fullscreen="true"  x5-video-player-type="h5" >
            style="object-fit:fill"
            <source type="video/mp4" src="video/3.mp4" -webkit-playsinline=true>
     </video>  
    
</body>
</html>
